<template>
  <div class="my-reports">
    <NavBar />
    <main class="container">
      <h1>我的举报记录</h1>
      
      <LoadingSpinner v-if="isLoading" message="加载举报记录..." />
      
      <div class="reports-list" v-else-if="reports.length > 0">
        <div 
          class="report-card"
          v-for="report in reports"
          :key="report.id"
        >
          <div class="report-header">
            <div class="report-type">
              <span class="label">举报类型:</span>
              <span>{{ getReasonText(report.reason) }}</span>
            </div>
            <div class="report-status" :class="getStatusClass(report.status)">
              {{ getStatusText(report.status) }}
            </div>
          </div>
          
          <div class="report-content">
            <div class="report-details">
              <div class="detail-item">
                <span class="label">举报ID:</span>
                <span>{{ report.id }}</span>
              </div>
              <div class="detail-item">
                <span class="label">被举报用户:</span>
                <span>{{ report.reported_name || '用户' + report.reported_id }}</span>
              </div>
              <div class="detail-item">
                <span class="label">相关书籍:</span>
                <span>{{ report.book_title || '书籍' + report.book_id }}</span>
              </div>
              <div class="detail-item">
                <span class="label">提交时间:</span>
                <span>{{ formatDateTime(report.created_at) }}</span>
              </div>
            </div>
            
            <div class="report-description">
              <h3>举报详情</h3>
              <p>{{ report.details }}</p>
            </div>
            
            <div class="admin-response" v-if="report.admin_comment">
              <h3>管理员回复</h3>
              <p>{{ report.admin_comment }}</p>
              <div class="response-time" v-if="report.updated_at">
                回复时间: {{ formatDateTime(report.updated_at) }}
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="empty-state" v-else>
        <div class="empty-icon">📋</div>
        <h3>暂无举报记录</h3>
        <p>您当前没有提交过任何举报</p>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import NavBar from '../components/NavBar.vue'
import LoadingSpinner from '../components/LoadingSpinner.vue'
import api from '@/api/apiClient'
import { ElMessage } from 'element-plus'

const reports = ref([])
const isLoading = ref(true)

onMounted(() => {
  fetchReports()
})

const fetchReports = async () => {
  try {
    isLoading.value = true
    const response = await api.report.getMyReports()
    
    console.log('获取举报记录响应:', response)
    
    // 处理响应数据
    if (response && Array.isArray(response)) {
      reports.value = response
    } else if (response && response.code === 200 && Array.isArray(response.data)) {
      reports.value = response.data
    } else if (response && response.reports && Array.isArray(response.reports)) {
      reports.value = response.reports
    } else {
      console.warn('未能识别的举报记录响应格式', response)
      reports.value = []
    }
    
    console.log('获取举报记录成功:', reports.value)
  } catch (error) {
    console.error('获取举报记录失败:', error)
    ElMessage.error('获取举报记录失败，请稍后重试')
    reports.value = []
  } finally {
    isLoading.value = false
  }
}

const getReasonText = (reason) => {
  const reasonMap = {
    'fake': '虚假信息',
    'inappropriate': '不适内容',
    'scam': '欺诈行为',
    'other': '其它原因'
  }
  return reasonMap[reason] || reason
}

const getStatusClass = (status) => {
  const statusClassMap = {
    'pending': 'pending',
    'processed': 'processed',
    'rejected': 'rejected'
  }
  return statusClassMap[status] || 'pending'
}

const getStatusText = (status) => {
  const statusMap = {
    'pending': '待处理',
    'processed': '已处理',
    'rejected': '已驳回'
  }
  return statusMap[status] || status || '待处理'
}

const formatDateTime = (dateString) => {
  if (!dateString) return '未知时间'
  
  try {
    const date = new Date(dateString)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    })
  } catch (error) {
    console.error('日期格式化错误:', error)
    return dateString
  }
}
</script>

<style scoped>
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
}

h1 {
  font-size: 1.8rem;
  color: #1f2937;
  margin-bottom: 2rem;
}

.reports-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.report-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.report-header {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.report-type {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.report-type .label {
  color: #6b7280;
  font-size: 0.9rem;
}

.report-status {
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.report-status.pending {
  background-color: #fef3c7;
  color: #d97706;
}

.report-status.processed {
  background-color: #d1fae5;
  color: #059669;
}

.report-status.rejected {
  background-color: #fee2e2;
  color: #dc2626;
}

.report-content {
  padding: 1.5rem;
}

.report-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.detail-item {
  display: flex;
  flex-direction: column;
}

.detail-item .label {
  color: #6b7280;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.report-description, .admin-response {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: #f9fafb;
  border-radius: 8px;
}

.report-description h3, .admin-response h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: #4b5563;
}

.report-description p, .admin-response p {
  margin: 0;
  white-space: pre-wrap;
}

.response-time {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #6b7280;
  text-align: right;
}

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  background-color: #f9fafb;
  border-radius: 8px;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.empty-state h3 {
  margin-bottom: 1rem;
  color: #1f2937;
}

.empty-state p {
  color: #6b7280;
}

@media (max-width: 768px) {
  .container {
    padding: 1rem;
  }
  
  .report-details {
    grid-template-columns: 1fr;
  }
}
</style> 